<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>21_选择器-优先级-复合选择器</title>

        <style>
            /* 
                a：id选择器
                b：类 伪类 属性
                c：元素 伪元素
            */

            /* （a,b,c）
               （a,b.c）
            按照位置来判断优先级   先判断a 如果a的值大 那么就不会继续比较  
            如果a的值相等  就继续比较b  如果b大 那么他的优先级就搞
            */

            /* (0,1,1) */
            p[class="p1"] {
                color: purple;
            }

            /* (0,0,3) */
            div div p {
                color: yellowgreen;
            }


            /* 练习 */
            /* 1 0 2 */
            div div #pp {
                color: red;
            }

            /* 1 0 0 */
            #pp {
                color: green;
            }

        </style>
    </head>
    <body>
        <div>
            <div>
                <p class="p1" id="pp">这个铺垫完毕之后就可以休息拉。。。</p>
            </div>
        </div>
    </body>
</html>